<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link href="style/editor.css" rel="stylesheet" type="text/css">
<script>
	var sLangDir=dialogArguments.oUtil.langDir;
	document.write("<scr"+"ipt src='language/"+sLangDir+"/table_insert.js'></scr"+"ipt>");
</script>
<script>writeTitle()</script>
<script>
var oTU=new TableUtilities();
	
function TableUtilities()
	{
	this.oTD;
	}

function GetElement(oElement,sMatchTag)
	{
	while (oElement!=null&&oElement.tagName!=sMatchTag)
		{
		if(oElement.tagName=="BODY")return null;
		oElement=oElement.parentElement;
		}
	return oElement;
	}
		
function tableClick(oTD)
	{
	oTable=GetElement(oTD,"TABLE")
	if(oTD.tagName!="TD")return;
		
	for(var i=0;i<oTable.rows.length;i++)
		{
		oCurrTR=oTable.rows(i)
		for(var j=0;j<oCurrTR.cells.length;j++)
			{
			oCurrTD=oCurrTR.cells(j)
			oCurrTD.style.backgroundColor="white";
			}
		}
	oTD.style.backgroundColor="#fac606";
	oTU.oTD=oTD;
	}

function colSpan()
	{
	if(oTU.oTD==null)return;
	var oTD = oTU.oTD
	var oTable=GetElement(oTD,"TABLE")

	if(oTD.nextSibling!=null)
		{
		numOfSpan=oTD.nextSibling.colSpan
		oTable.rows[oTD.parentElement.rowIndex].deleteCell(oTD.nextSibling.cellIndex);
			
		oTD.colSpan=oTD.colSpan+numOfSpan;
		}
	}
		
function rowSpan()
	{
	if(oTU.oTD==null)return;
	var oTD = oTU.oTD
	var oTable=GetElement(oTD,"TABLE")
		
	selectedRow=oTD.innerText.split(",")[0]*1//asumsi:displayed=actual
	selectedCol=oTD.innerText.split(",")[1]*1

	isFinish=false
	for(var k=1;k<oTable.rows.length-(selectedRow);k++)
		{
		var isExist=false;
		for(var i=0;i<oTable.rows(selectedRow+k).childNodes.length;i++)
			{
			if(oTable.rows(selectedRow+k).childNodes(i).innerText.split(",")[1]*1==selectedCol)
				{
				nActualToDelete=i
				isExist=true
				}
			}		
		if(isExist)
			{
			if(!isFinish)
				{
				oTD.rowSpan+=oTable.rows(selectedRow+k).childNodes(nActualToDelete).rowSpan
				oTable.rows(selectedRow+k).deleteCell(nActualToDelete)
				isFinish=true
				}
			}
		}
	}

function doPreview()
	{
	if(inpCollapse.value=="Yes")
		sTmp="BORDER-COLLAPSE: collapse"
	else
		sTmp="";
	
	var sCellSpacing="";
	if(inpSpacing.value!="")sCellSpacing="cellspacing="+inpSpacing.value;
		
	var sCellPadding="";
	if(inpPadding.value!="")sCellPadding="cellpadding="+inpPadding.value;
	
	sHTML="<table id=idTable style='"+sTmp+";background-color:white' "+sCellSpacing+" "+sCellPadding+" width=100% height=100%>"
		
	for(var i=0;i<inpRows.value;i++)
		{
		sHTML+="<tr>"
		for(var j=0;j<inpCols.value;j++)
			{
			if(inpBorder.value==0)
				sHTML+="<td style='border:black 1px dotted;padding:1px;cursor:default;' align=center onclick='tableClick(this)'>" + i + "," + j + "</td>";
			else
				sHTML+="<td style='border:black " + inpBorder.value + "px solid;padding:1px;cursor:default;' align=center onclick='tableClick(this)'>" + i + "," + j + "</td>";
			}
		sHTML+="</tr>"
		}
	sHTML+="</table>"
	idPreview.innerHTML=sHTML
	}
	
function doPreview2()
	{
	var oTable=idPreview.document.all.idTable
	
	if(inpCollapse.value=="Yes")
		oTable.style.borderCollapse="collapse";
	else
		oTable.style.borderCollapse="";
	oTable.cellSpacing=inpSpacing.value;

	oTable.cellPadding=inpPadding.value;
	
	for(var i=0;i<oTable.rows.length;i++)
		{
		oCurrTR=oTable.rows(i)
		for(var j=0;j<oCurrTR.cells.length;j++)
			{
			oCurrTD=oCurrTR.cells(j)
			if(inpBorder.value==0)
				oCurrTD.style.border="black 1px dotted";
			else
				oCurrTD.style.border="black " + inpBorder.value + "px solid";
			}
		}
	}	
	
function doInsert()
	{
	if(!dialogArguments.oUtil.obj.checkFocus()){return;}//Focus stuff
	var oEditor=dialogArguments.oUtil.oEditor;
	var oSel=oEditor.document.selection.createRange();

	dialogArguments.oUtil.obj.saveForUndo();

	var oNodes=idPreview.childNodes(0).childNodes(0).childNodes

	if(inpCollapse.value=="Yes")
		sTmp="BORDER-COLLAPSE: collapse"
	else
		sTmp="";

	var sCellSpacing="";
	if(inpSpacing.value!="")sCellSpacing="cellspacing="+inpSpacing.value;
	
	var sCellPadding="";
	if(inpPadding.value!="")sCellPadding="cellpadding="+inpPadding.value;	
	
	sHTML="<table style='"+sTmp+";width:100%;' "+sCellSpacing+" "+sCellPadding+" selThis=\"selThis\">" //BORDER-COLLAPSE:collapse; cellpadding=0 cellspacing=0
	for(var i=0;i<oNodes.length;i++)
		{
		sHTML+="<tr>"
		for(var j=0;j<oNodes(i).childNodes.length;j++)
			{			
			nRowSpan=oNodes(i).childNodes(j).rowSpan
			nColSpan=oNodes(i).childNodes(j).colSpan
			var sRowSpan=(nRowSpan>1 ? " rowspan="+nRowSpan+ " " : "");
			var sColSpan=(nColSpan>1 ? " colspan="+nColSpan+ " " : "");
			if(inpBorder.value==0)
				sHTML+="<td "+sRowSpan+sColSpan+" style='vertical-align:top'></td>";
			else
				sHTML+="<td style='border:black " + inpBorder.value + "px solid;vertical-align:top' "+sRowSpan+sColSpan+"></td>";
			}
		sHTML+="</tr>"
		}
	sHTML+="</table>"
				
	if(oSel.parentElement)
		oSel.pasteHTML(sHTML);
	else
		oSel.item(0).outerHTML = sHTML;
		
	for(var i=0;i<oEditor.document.all.length;i++)
		{
		if(oEditor.document.all[i].getAttribute("selThis")=="selThis")
			{
			oEditor.document.all[i].removeAttribute("selThis",0);				
			var oSelRange = oEditor.document.body.createControlRange()
			oSelRange.add(oEditor.document.all[i]);
			oSelRange.select();					
			}
		}		
		
	//*** RUNTIME BORDERS ***
	dialogArguments.oUtil.obj.runtimeBorder(false);
	//***********************	
	
	dialogArguments.realTime(dialogArguments.oUtil.oName);
	dialogArguments.oUtil.obj.selectElement(0);
	}
function bodyOnload()
	{
	btnInsert.focus();
	}
</script>
</head>
<body onload="bodyOnload();loadTxt();doPreview()" style="overflow:hidden;">
<!-- do not remove "filter" -->

<table width=100% height="100%" align=center cellpadding=0 cellspacing=0>
<tr>
<td valign=top style="padding:7;padding-left:10;padding-right:10">

<!---->	
	<table style="margin-bottom:4">
	<tr>
		<td><span id=txtLang name=txtLang>Rows</span>:</td>
		<td><input type="text" ID="inpRows" NAME="inpRows" size=3 value=2 onchange="doPreview()" class="inpTxt"></td>
		<td>&nbsp;</td>
		<td><span id="txtLang" name=txtLang>Spacing</span>:</td>
		<td><select id="inpSpacing" name="inpSpacing" onchange="doPreview2()" class="inpSel">
				<option value="" selected></option>
				<option value=0>0px</option>
				<option value=1>1px</option>
				<option value=2>2px</option>
				<option value=3>3px</option>
				<option value=4>4px</option>
				<option value=5>5px</option>
			</select>
		</td>
	</tr>
	<tr>
		<td><span id="txtLang" name=txtLang>Columns</span>:</td>
		<td><input type="text" id="inpCols" name="inpCols" size=3 value=2 onchange="doPreview()" class="inpTxt"></td>
		<td>&nbsp;</td>
		<td><span id="txtLang" name=txtLang>Padding</span>:</td>
		<td><select id="inpPadding" name="inpPadding" onchange="doPreview2()" class="inpSel">
				<option value="" selected></option>
				<option value=0>0px</option>
				<option value=1>1px</option>
				<option value=2>2px</option>
				<option value=3>3px</option>
				<option value=4>4px</option>
				<option value=5>5px</option>
			</select>
		</td>
	</tr>
	<tr>
		<td><span id=txtLang name=txtLang>Borders</span>:</td>
		<td>
			<select ID="inpBorder" NAME="inpBorder" onchange="doPreview2()" class="inpSel">
				<option value=0 id="optLang" name="optLang" selected>No Border</option>
				<option value=1>1px</option>
				<option value=2>2px</option>
				<option value=3>3px</option>
				<option value=4>4px</option>
				<option value=5>5px</option>
			</select>
		</td>
		<td>-</td>
		<td><span id=txtLang name=txtLang>Collapse</span>:</td>
		<td>
			<select ID="inpCollapse" NAME="inpCollapse" onchange="doPreview2()" class="inpSel">
				<option value="Yes" id="optLang" name="optLang" selected>Yes</option>
				<option value="No" id="optLang" name="optLang">No</option>
			</select>	
		</td>
<!---->
	</tr>
	</table>


	<table style="width:100%;height:140;" cellpadding=0 cellspacing=0 border=0>
	<tr>
		<td style="background-color:ghostWhite; padding:0; border:2 inset;" height=100%>
			<div id=idPreview style="overflow:auto;width:100%;height:100%;padding:10"></div>
		</td>
	</tr>
	<tr>
		<td align=center nowrap>
			<INPUT type="button" name="btnSpan2" id="btnSpan2" value="Span >" onclick="colSpan()" unselectable=on style="height:22;" class="inpBtn" onmouseover="this.className='inpBtnOver';" onmouseout="this.className='inpBtnOut'">
			<INPUT type="button" name="btnSpan1" id="btnSpan1" value="Span v" onclick="rowSpan()" unselectable=on style="height:22;" class="inpBtn" onmouseover="this.className='inpBtnOver';" onmouseout="this.className='inpBtnOut'">
		</td>
	</tr>
	</table>
	

</td>
</tr>
<tr>
<td class="dialogFooter" style="padding:13;padding-top:7;padding-bottom:7;" align="right">
	<input type="button" name=btnCancel id=btnCancel value="cancel" onclick="self.close()" class="inpBtn" onmouseover="this.className='inpBtnOver';" onmouseout="this.className='inpBtnOut'">
	<input type="button" name=btnInsert id=btnInsert value="insert" onclick="doInsert();self.close()" class="inpBtn" onmouseover="this.className='inpBtnOver';" onmouseout="this.className='inpBtnOut'">
</td>
</tr>
</table>

</body>
</html>